<template>
    <div class="nav">
        <div>
            <template v-for="(item, index) in nav" :key="index">
                <NuxtLink
                    v-if="!item?.hidden"
                    :to="{
                        path: item.link?.path,
                        query: item.link?.query
                    }"
                    class="nav-item online-nav-item"
                    :class="{
                        active: currentIndex === index,
                        'online-nav-active': currentIndex === index
                    }"
                    @click="currentIndex = index"
                >
                    <div
                        class="flex items-center online-nav-font"
                        style="line-height: 18px"
                    >
                        <i
                            class="iconfont"
                            style="font-size: 18px"
                            :class="[item.icon]"
                        />
                        <div class="ml-[5px] font-bold text-[17px]">
                            {{ item.name }}
                        </div>
                    </div>
                </NuxtLink>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
// todo 修改侧边栏
import { useAppStore } from '~/stores/app'
const route = useRoute()
const currentIndex = ref(-1)
const appStore = useAppStore()
const nav = computed(() => {
    return [
        {
            name: '对话',
            is_show: '1',
            icon: 'icon-duihua',
            link: {
                path: '/',
                name: '首页对话'
            }
        },
        {
            name: '广场',
            is_show: '1',
            icon: 'icon-yingyongchengxu-xianxing',
            link: {
                path: '/skill',
                name: '广场'
            }
        },
        {
            name: '绘画',
            is_show: '1',
            icon: 'icon-huihua',
            link: {
                path: '/app/drawing',
                name: 'AI绘画'
            }
        },
        {
            name: '图场',
            is_show: '1',
            icon: 'icon-yingyongchengxu',
            link: {
                path: '/app/square',
                name: '图场'
            }
        },
        {
            name: '模板',
            is_show: '1',
            icon: 'icon-ziyuan',
            link: {
                path: '/app/square',
                name: 'AI绘画'
            }
        },
        // {
        //     name: '素材',
        //     is_show: '1',
        //     icon: 'icon-sucai',
        //     link: {
        //         path: '/app/square',
        //         name: 'AI绘画'
        //     }
        // },
        {
            name: '脑图',
            is_show: '1',
            icon: 'icon-huojianjiasu_o',
            link: {
                path: '/mind',
                name: '脑图'
            }
        },
        {
            name: '白板',
            is_show: '1',
            icon: 'icon-huojianjiasu_o',
            link: {
                path: '/board',
                name: '白板'
            }
        },
        {
            name: '写作',
            is_show: '1',
            icon: 'icon-huojianjiasu_o',
            link: {
                path: '/writing',
                name: '写作'
            }
        },
        {
            name: '更新',
            is_show: '1',
            icon: 'icon-huojianjiasu_o',
            link: {
                path: '/drawing',
                name: '更新记录'
            }
        }
    ]
    // return (
    //     appStore.getTabbarConfig.nav
    //         ?.filter((item: any) => item.is_show == '1')
    //         .map((item: any) => {
    //             return {
    //                 ...item,
    //                 selected: appStore.getImageUrl(item.selected),
    //                 unselected: appStore.getImageUrl(item.unselected)
    //             }
    //         }) || []
    // )
})
const routeIndex = nav.value.findIndex((nav) => {
    const routePath =
        route.path === '/' ? route.path : route.path.replace(/\/$/, '')
    return (
        nav.link?.path === route.meta.activePath || nav.link?.path === routePath
    )
})
if (routeIndex !== -1) {
    currentIndex.value = routeIndex
}
</script>

<style lang="scss" scoped>
@import 'assets/styles/fix_online_css.scss';

.nav {
    .nav-item {
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        margin: 14px 0;
        color: #838a95;
        &.active {
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                height: 30px;
                width: 5px;
                background: var(--el-color-primary);
            }

            color: var(--el-color-primary);
            //background: linear-gradient(
            //    90deg,
            //    var(--gradient-1) 0%,
            //    var(--gradient-2) 100%
            //);
        }
    }
}
</style>

<!-- 默认的 -->
<!--<script>-->
<!--[-->
<!--  {-->
<!--    "name": "对话",-->
<!--    "selected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-chat.png",-->
<!--    "unselected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-select-chat.png",-->
<!--    "is_show": "1",-->
<!--    "link": {-->
<!--      "path": "/",-->
<!--      "name": "首页对话",-->
<!--      "type": "shop"-->
<!--    }-->
<!--  },-->
<!--  {-->
<!--    "name": "创作",-->
<!--    "selected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-creation.png",-->
<!--    "unselected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-select-creation.png",-->
<!--    "is_show": "1",-->
<!--    "link": {-->
<!--      "path": "/create",-->
<!--      "name": "AI创作",-->
<!--      "type": "shop"-->
<!--    }-->
<!--  },-->
<!--  {-->
<!--    "name": "技能",-->
<!--    "selected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-skill.png",-->
<!--    "unselected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-select-skill.png",-->
<!--    "is_show": "1",-->
<!--    "link": {-->
<!--      "path": "/skill",-->
<!--      "name": "AI技能",-->
<!--      "type": "shop"-->
<!--    }-->
<!--  },-->
<!--  {-->
<!--    "name": "绘画",-->
<!--    "selected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-draw.png",-->
<!--    "unselected": "http://www.igpt5.cn/resource/image/adminapi/default/pc-select-draw.png",-->
<!--    "is_show": "1",-->
<!--    "link": {-->
<!--      "path": "/drawing",-->
<!--      "name": "AI绘画",-->
<!--      "type": "shop"-->
<!--    }-->
<!--  }-->
<!--]-->
<!--</script>-->
